<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>出现错误了</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/favicon.svg" >
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    @media screen and (min-width: 768px) {
        #wrap {
            width: 1180px;
            height: 407px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -224px;
            margin-left: -590px;
            display: flex;
            align-items: center;
        }

        #wrap .text {
            float: right;
            position: relative;
            left: -125px;
            top: 10px;
        }
    }

    @media screen and (min-width: 320px) and (max-width:767px) {

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
        }

        #wrap,
        #wrap img {
            width: 100%;
            margin-bottom: 60px;
        }

        #wrap .text {
            text-align: center;
        }
    }
</style>

<body>
<div id="wrap">
    <div style="float: left">
        <div th:switch="${status}">
            <img th:case="403" src="/static/img/error/404.png" alt="404" width="910" />
            <img th:case="404" src="/static/img/error/404.png" alt="404" width="910" />
            <img th:case="500" src="/static/img/error/404.png" alt="404" width="910" />
        </div>
    </div>
    <div class="text">
        <div th:switch="${status}">
            <div th:case="403">
                <p style="color: #0086F0;font-size: 26px;margin-bottom: 6px;">很抱歉</p>
                <p style="color: #0086F0;font-size: 22px;margin-bottom: 20px;">此页面访问权受限制了.....</p>
            </div>
            <div th:case="403">
                <p style="color: #0086F0;font-size: 26px;margin-bottom: 6px;">哎呀</p>
                <p style="color: #0086F0;font-size: 22px;margin-bottom: 20px;">您访问的页面找不到了......</p>
            </div>
            <div th:case="403">
                <p style="color: #0086F0;font-size: 26px;margin-bottom: 6px;">对不起</p>
                <p style="color: #0086F0;font-size: 22px;margin-bottom: 20px;">服务器出错了.....</p>
            </div>
        </div>
        <a href="/user/index" style="color: #F68C22;font-size: 22px;text-decoration: none;">点击这里</a>
        <span style="color: #0086F0;font-size: 22px;margin-left: 15px;">返回首页</span>
    </div>
</div>
</body>

</html>